<template>
	<view class="wrapper">
		<view class="main">
			<view class="new_box center" v-for="(val,index) in myList" :key='val.collectMsgId'>
				<dimg :src="'' | avatar" mode="aspectFill" class="avatar"></dimg>
				<view class="new_main flex">
					<view class="user_name f30 ctheme">{{userinfo.nickname}}</view>
					<!-- 文本 -->
					<view class="new_text f26">
						{{val.collectContent}}
					</view>
					<!-- 图片 -->
					<view class="new_img_box center space-between">
						<image :src="item" mode="aspectFill" class="new_img" v-for="(item,i) in val.url" :key='i' v-if="val.type==1"></image>
						<video :src="val.url" controls v-if="val.type==2"></video>
					</view>
					<!-- 底部操作栏 -->
					<view class="new_operation flex-start center">
						<view class="time_box f22 center">
							{{val.createTime | timediff}}
							<text class="ctheme" @tap="emojiDelete(val.emojiId,index)">删除</text>
						</view>
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showAlert:false,
			left:'',
			top:'',
			myList:[],
			userinfo:uni.getStorageSync('userinfo')
		};
	},
	onShow() {
		this.myList=[]
		this.getcollectionList()
	},
	onLoad() {},
	methods: {
		// 删除收藏
		emojiDelete(collectMsgId,index){
			let that=this
			uni.showModal({
				title:'温馨提示',
				content:'确定要删除吗？',
				success(e) {
					if(e.confirm){
						that.$ajax(that.apiList.emojiDelete,{
							emojiId: collectMsgId
						},'GET').then(res => {
							that.$sToast('删除成功')
							that.myList.splice(index,1)
						});
					}
				}
			})
			
		},
		getcollectionList() {
			this.$ajax(this.apiList.collectionList,{
				userId: uni.getStorageSync('userinfo').userId
			}).then(res => {
				res.data.forEach(item => {
					return item.url = item.url?item.url.split(','):[]
				})
				this.myList=this.myList.concat(res.data)
			});
		},
		changeAlert(){
			this.showAlert=!this.showAlert
		}
	}
};
</script>

<style lang="scss">
.alert_list {
	background: #ffffff;
	width: 345rpx;
	border-radius: 12rpx;
	.center {
		padding: 28rpx 45rpx;
		justify-content: flex-start;
	}
	image {
		width: 40rpx;
		height: 39rpx;
		margin-right: 33rpx;
	}
}

.new_box {
	padding: 20rpx 37rpx;
	align-items: flex-start;
	border-bottom: 1rpx solid #e0e0e0;
	
	.time_box {
		.ctheme {
			margin-left: 20rpx;
		}
	}
	.new_operation {
		image {
			width: 25rpx;
			height: 24rpx;
			margin: 0 4rpx 0 20rpx;
		}
	}
	.new_img_box {
		flex-wrap: wrap;
		width: 585rpx;
		image,video {
			width: 184rpx;
			height: 184rpx;
			margin-bottom: 15rpx;
			&:not(:nth-of-type(3n)) {
				margin-right: 15rpx;
			}
		}
	}
	.new_text {
		width: 580rpx;
		padding: 19rpx 0 27rpx;
	}
	.ctheme {
		color: #516aad;
	}
	.avatar {
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		overflow: hidden;
	}
}
</style>
